<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="/common/head.jsp" %>

<c:set var="module" value="order"/>
<style>
	.suborderitem {
		display:none;
	}
	.suborder-children {
	    height: 40px;
	    line-height: 40px;
	    background-color: #e5f5ff;
	}
	.suborder-children > span {
	    display: block;
	    float: left;
	    width: 25%;
	    text-align: center;
	    height: 40px;
	    overflow: hidden;
	}
	.suborder-children-content {
		background-color: #f5fbff;
	}
	.suborder-children-content img {
	    display: block;
	    width: 30px;
	    height: 30px;
	    margin-top:5px;
	    float: left;
	    padding-right: 10px;
	}
	.suborder-children-content label {
		display: block;
	    height: 30px;
	    width: 100px;
	    float: left;
	    text-align: left;
	    font-weight: normal;
	}
</style>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                    	<form role="form" class="form-inline" id="query-form" method="post" action="${ctx }/admin/order/subAccountOrder" >
                    		<!-- 查询开始 -->
                            <div class="form-group">
                                <label for="query-orderNo" class="sr-only">子账号名称</label>
                                	<input type="text" placeholder="子账号名称" id="query-orderNo" name="order.user.username" value="${query.order.user.username }" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="query-orderNo" class="sr-only">等级</label>
                                	<input type="text" placeholder="等级" id="query-orderNo" name="order.user.type" value="${query.order.user.type }" class="form-control">
                            </div> 
                            <div class="form-group">
                            	<button class="btn btn-primary form-control" type="submit"><i class="fa fa-check"></i>&nbsp;查询</button>
                            </div>
                            <!-- 查询结束 -->
                        </form>
                    
						<div>
						<div class="full-height-scroll">
                                  <div class="table-responsive" id="orderlist">
                                     <!--  <table id="table" data-toggle="table" data-height="400" data-click-to-select="true" data-mobile-responsive="true">
		                                 <thead>
		                                     <tr>
		                                         <th data-field="order.user.username">子账号名称</th>
		                                         <th data-field="order.user.contactName">联系人</th>
		                                         <th data-field="order.user.mobile">联系电话</th>
		                                         <th data-field="order.user.address">联系地址</th>
		                                         <th data-field="order.user.type">等级</th>
		                                         <th data-field="">订单详情</th>
		                                     </tr>
		                                 </thead> -->
		                        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
                                <thead>
                                <tr>
                                    <th data-field="order.user.username">子账号名称</th>
                                    <th data-field="order.user.contactName">联系人</th>
                                    <th data-field="order.user.mobile">联系电话</th>
                                    <th data-field="order.user.address">联系地址</th>
                                    <th data-field="order.user.type">等级</th>
                                    <th data-toggle="true" >订单详情</th>
                                    <th data-hide="all"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list }" var="n" varStatus="idx">
                                <tr>
									<td style="">${n.order.user.username }</td>
									<td style="">${n.order.user.contactName }</td>
									<td style="">${n.order.user.mobile }</td>
									<td style="">${n.order.user.address }</td>
									<td style="">${n.order.user.type }</td>
									<td style="border-bottom: 1px solid #e7eaec;">查看</td>
                                    <td>
                                    	<div class="suborder-children">
                                    		<span>月份</span>
											<span>商品名称</span>
											<span>数量</span>
											<span>总额</span>
                                    	</div>
                                    	<c:forEach items="${childrens }" var="c" varStatus="cdx">
                                    	<c:if test="${c.order.user.id==n.order.user.id }">
										<div class="suborder-children suborder-children-content">
											<span><fmt:formatDate value="${c.order.createTime}" pattern="MM"/></span>
											<span><img src="${c.product.images }"/><label>${c.product.name }</label></span>
											<span style="">${c.quantity }</span>
											<span style="">￥${c.payPrice }</span>
										</div>
										</c:if>
										</c:forEach>
									</td>
                                </tr>
                                </c:forEach>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="5">
                                        <ul class="pagination pull-right"></ul>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
										<%-- <tbody>
										<c:forEach items="${list }" var="n" varStatus="idx">
											<tr data-index="${idx.index }">
												<td style="">${n.order.user.username }</td>
												<td style="">${n.order.user.contactName }</td>
												<td style="">${n.order.user.mobile }</td>
												<td style="">${n.order.user.address }</td>
												<td style="">${n.order.user.type }</td>
												<td onclick="showsublist(this);" style="">&gt;</td>
											</tr>
										</c:forEach>
											<tr class="suborderitem">
												<td colspan="6">
													<div class="suborderitem_title">
														<span>月份</span>
														<span>商品名称</span>
														<span>数量</span>
														<span>总额</span>
													</div>
													<div class="suborderitem_list">
														<span>10</span>
														<span><img src=""/><span>测试测试测试测试</span></span>
														<span style="">13张</span>
														<span style="">￥1111</span>
													</div>
													<div class="suborderitem_list">
														<span>10</span>
														<span><img src=""/><span>测试测试测试测试</span></span>
														<span style="">13张</span>
														<span style="">￥1111</span>
													</div>
													<div class="suborderitem_list">
														<span>10</span>
														<span><img src=""/><span>测试测试测试测试</span></span>
														<span style="">13张</span>
														<span style="">￥1111</span>
													</div>
												 </td>
											 </tr> 
										</tbody> --%>
									  </table>
                            	</div>
                        </div>
						<div class="row">
							<div class="col-sm-6">
								<div class="dataTables_info" id="DataTables_Table_0_info"
									role="alert" aria-live="polite" aria-relevant="all">显示第 ${(page.page - 1) * page.pageSize  + 1}
									到第 ${(page.page) * page.pageSize} 项，共 ${page.totalRecords } 项</div>
							</div>
							<div class="col-sm-6">
								<div class="dataTables_paginate paging_simple_numbers"
									id="DataTables_Table_0_paginate">
									<ul class="pagination" id="pagination">
									</ul>
								</div>
							</div>
						</div>

					</div>
                </div>
            </div>
        </div>
    </div>

<%@include file="/common/foot.jsp" %>
<script>
$(document).ready(function() {

    $('.footable').footable();

});

function showsublist(_this) {
	var parent = $(_this).parent();
	var sublist = parent.next();
	if(parent.hasClass('active')) {
		parent.removeClass('active');
		sublist.slideUp();
	}else{
		parent.addClass('active');
		sublist.slideDown();
	}
}
function add() {
		layer.open({
		    type: 2,
		    skin: 'layui-layer-rim', //加上边框
		    area: [layer_default_width, layer_default_height], //宽高
		    content: "${ctx}/admin/order/detail",
		    btn: ['确定', '取消'],
		    yes: function(index, layero){ //或者使用btn1
		    	var detailForm = layer.getChildFrame('form', index);
		    	console.log(detailForm);
		    	detailForm.ajaxSubmit({
		    		success: function(data) {
		    			if (isSuccess(data)) {
		    				layer.close(index);
		    				reload();
		    			} else {
		    			}
		    		}
		    	});
		    }, cancel: function(index){ //或者使用btn2
		        //按钮【按钮二】的回调
		    }
		});
}

function edit() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length == 0) {
		error('请选择一条记录');
		return;
	} else if (selections.length > 1) {
		error('只能选择一条记录');
		return;
	}
	var id = selections[0].id;
	
	layer.open({
	    type: 2,
	    skin: 'layui-layer-rim', //加上边框
	    area: [layer_default_width, layer_default_height], //宽高
	    content: "${ctx}/admin/order/detail?id=" + id,
	    btn: ['确定', '取消'],
	    yes: function(index, layero){ //或者使用btn1
	    	var detailForm = layer.getChildFrame('form', index);
	    	console.log(detailForm);
	    	detailForm.ajaxSubmit({
	    		success: function(data) {
	    			if (isSuccess(data)) {
	    				layer.close(index);
	    				reload();
	    			} else {
	    			}
	    		}
	    	});
	    }, cancel: function(index){ //或者使用btn2
	        //按钮【按钮二】的回调
	    }
	});
}
var page = "${page.page}";
function reload() {
	page_submit(page);
}
function del() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length < 1) {
		error('请选择要删除的记录');
		return;
	}
	layer.confirm('确认要删除吗?', {icon: 3, title:'提示'}, function(index){
		var ids = new Array();
		for (var i = 0; i < selections.length; i++) {
			ids.push(selections[i].id);
		}
		$.ajax({
			url: "${ctx}/admin/order/delete",
			data: {
				ids: ids.join(',')
			},
			success: function(data) {
				if (isSuccess(data)) {
					layer.close(index);
					reload();
				}
			}
		});
	});
	
}
paging('pagination', ${page.totalPages}, ${page.page});

</script>
</body>
</html>